window.addEventListener('load', function () {
    // 1.显示和隐藏遮罩层效果
    var mask = this.document.querySelector('.mask');
    var big = this.document.querySelector('.big');
    var preview_img = this.document.querySelector('.preview_img');
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // 2.放大效果-->遮罩层跟随鼠标
    preview_img.addEventListener('mousemove', function (e) {
        // 获取当前的鼠标在盒子内部的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // 将当前的鼠标坐标不断赋值给mask盒子   将鼠标的位置移动到中间（top和left都减去mask盒子的大小,宽度和高度）
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        var maskWidthMax = preview_img.offsetWidth - mask.offsetWidth;  // 获得遮罩层的最大宽度
        var maskHeightMax = preview_img.offsetHeight - mask.offsetHeight;  // 获得遮罩层的最大高度
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskWidthMax) {
            maskX = maskWidthMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskHeightMax) {
            maskY = maskHeightMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';


        // 核心算法  1/2 = x/4  求x
        //          遮罩层的最大移动距离/遮罩层移动的距离 = 图片最大移动的距离/图片移动的距离
        //       -->   图片移动的距离 = 遮挡层移动的距离 * 图片最大移动距离 / 遮挡层最大移动的距离
        // 获取大图  
        var bigimg = document.querySelector('.bigImg');
        var imgwidthMax = bigimg.offsetWidth - big.offsetWidth;
        // 获取的是最大移动的距离--> 图片的宽度-盒子本身的宽度
        var imgheightMax = bigimg.offsetHeight - big.offsetHeight;  // 获取的是最大移动的距离--> 图片的高度-盒子本身的高度
        var imgleft = maskX * imgwidthMax / maskWidthMax;
        var imgtop = maskY * imgheightMax / maskHeightMax;
        // 注意：图片要有left和top值，前提是 图片一定有定位
        bigimg.style.left = -imgleft + 'px';
        bigimg.style.top = -imgtop + 'px';
    })
})